<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-99929335-4"></script>
    <script>
      window.dataLayer = window.dataLayer || []
      function gtag() {
        dataLayer.push(arguments)
      }
      gtag('js', new Date())
      gtag('config', 'UA-99929335-4')

      var getOutboundLink = function (url) {
        gtag('event', 'click', {
          event_category: 'outbound',
          event_label: url,
          transport_type: 'beacon',
          event_callback: function () {}
        })
      }
    </script>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" type="image/x-icon" />
    <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png" />
    <link
      rel="icon"
      type="image/png"
      sizes="192x192"
      href="%PUBLIC_URL%/android-chrome-192x192.png"
    />
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://neumorphism.io/" />
    <meta property="og:title" content="Neumorphism/Soft UI CSS shadow generator" />
    <meta
      property="og:description"
      content="CSS code generator that will help with colors, gradients and shadows to adapt this new design trend or discover its posibilities."
    />
    <meta property="og:image" content="https://neumorphism.io/ogImage.png" />

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:url" content="https://neumorphism.io/" />
    <meta property="twitter:title" content="Neumorphism/Soft UI CSS shadow generator" />
    <meta
      property="twitter:description"
      content="CSS code generator that will help with colors, gradients and shadows to adapt this new design trend or discover its posibilities."
    />
    <meta property="twitter:image" content="https://neumorphism.io/ogImage.png" />
    <link
      href="https://fonts.googleapis.com/css?family=Muli:400,700&display=swap"
      rel="stylesheet dns-prefetch preconnect"
      crossorigin
    />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#001f3f" />
    <meta name="author" content="Adam Giebl, adamgiebl@gmail.com" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta
      name="description"
      content="CSS code generator that will help with colors, gradients and shadows to adapt this new design trend or discover its posibilities."
    />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>Neumorphism/Soft UI CSS shadow generator</title>
  </head>
  <body>
    <div class="title">
      <h1 class="main-heading">Neumorphism.io</h1>
      <h2>Generate <b>Soft</b>-UI CSS code</h2>
    </div>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <footer>
      <div class="social">
        <a
          href="https://instagram.com/adamgiebl.io"
          class="instagram"
          target="_blank"
          rel="noopener"
          onclick="getOutboundLink('https://instagram.com/adamgiebl.io'); return true;"
        >
          <svg aria-label="Instagram" height="24" viewBox="0 0 48 48" width="24">
            <path
              d="M13.86.13A17 17 0 008 1.26 11 11 0 003.8 4 12.22 12.22 0 001 8.28 18 18 0 00-.11 14.1c-.13 2.55-.13 3.38-.13 9.9s0 7.32.13 9.9A18 18 0 001 39.72 11.43 11.43 0 003.8 44 12.17 12.17 0 008 46.74a17.75 17.75 0 005.82 1.13c2.55.13 3.38.13 9.9.13s7.32 0 9.9-.13a17.82 17.82 0 005.83-1.13A11.4 11.4 0 0043.72 44a11.94 11.94 0 002.78-4.24 17.7 17.7 0 001.13-5.82c.13-2.55.13-3.38.13-9.9s0-7.32-.13-9.9a17 17 0 00-1.13-5.86A11.31 11.31 0 0043.72 4a12.13 12.13 0 00-4.23-2.78A17.82 17.82 0 0033.66.13C31.11 0 30.28 0 23.76 0s-7.31 0-9.9.13m.2 43.37a13.17 13.17 0 01-4.47-.83 7.25 7.25 0 01-2.74-1.79 7.25 7.25 0 01-1.79-2.74 13.23 13.23 0 01-.83-4.47c-.1-2.52-.13-3.28-.13-9.7s0-7.15.13-9.7a12.78 12.78 0 01.83-4.44 7.37 7.37 0 011.79-2.75A7.35 7.35 0 019.59 5.3a13.17 13.17 0 014.47-.83c2.52-.1 3.28-.13 9.7-.13s7.15 0 9.7.13a12.78 12.78 0 014.44.83 7.82 7.82 0 014.53 4.53 13.12 13.12 0 01.83 4.44c.13 2.51.13 3.27.13 9.7s0 7.15-.13 9.7a13.23 13.23 0 01-.83 4.47 7.9 7.9 0 01-4.53 4.53 13 13 0 01-4.44.83c-2.51.1-3.28.13-9.7.13s-7.15 0-9.7-.13m19.63-32.34a2.88 2.88 0 102.88-2.88 2.89 2.89 0 00-2.88 2.88M11.45 24a12.32 12.32 0 1012.31-12.35A12.33 12.33 0 0011.45 24m4.33 0a8 8 0 118 8 8 8 0 01-8-8"
            ></path>
          </svg>
        </a>
        <a
          class="bmc-button bmcButton"
          target="_blank"
          href="https://www.buymeacoffee.com/IcJ5YzN"
          onclick="getOutboundLink('https://www.buymeacoffee.com/IcJ5YzN'); return true;"
          ><img
            src="https://cdn.buymeacoffee.com/buttons/bmc-new-btn-logo.svg"
            alt="Buy me a coffee"
          /><span>Buy me a coffee</span></a
        >
      </div>
      <div class="links">
        <h4 class="open">This project is now <b>Open-Source</b>!</h4>
        <div class="widget widget-lg github-star">
          <a
            class="btn"
            href="https://github.com/adamgiebl/neumorphism"
            rel="noopener"
            target="_blank"
            aria-label="Star adamgiebl/neumorphism on GitHub"
            onclick="getOutboundLink('https://github.com/adamgiebl/neumorphism'); return true;"
            ><svg
              viewBox="0 0 16 16"
              width="16"
              height="16"
              class="octicon octicon-star"
              aria-hidden="true"
            >
              <path
                fill-rule="evenodd"
                d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"
              ></path>
            </svg>
            <span>Star on GitHub</span></a
          >
        </div>
      </div>
    </footer>
  </body>
</html>
